<template>
  <a-card :bordered="false">
    <div  style="margin-left: 60px">
      <a-button type="primary" ghost  @click="handleCheckedKeys">
        {{buttonName}}
      </a-button>
      <a-tree ref="tree"
              checkable
              v-model="checkedKeys"
              :tree-data="treeData"
              :check-strictly="true"
              :expanded-keys="expandedKeys"
              :replace-fields="menuReplaceFields"
              @check="onCheck" @expand="onExpand"
      />
    </div>
  </a-card>
</template>

<script>
export default {
  name: "MultiTree",
  props:{
    buttonName:{type:String,default:"获取"},
    treeData:{type:Array,default:()=>[]},
    defaultExpandedKeys:{type:Array,default:()=>[]},
    defaultCheckedKeys:{type:Array,default:()=>[]},
    menuReplaceFields:{
      type:Object,
      default:()=>({children:'children', title:'title', key:'key' })
    }
  },
  data(){
    return{
      checkedKeys:this.defaultCheckedKeys,
      expandedKeys:this.defaultExpandedKeys,
      autoExpandParent:true
    }
  },
  methods:{
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;

    },
    handleCheckedKeys() {
      this.$emit('handleCheckedKeys',this.checkedKeys)
    },
  }
}
</script>

<style scoped>

</style>
